<template>
	<view class="app-login">
		<UniStatusBar bgcolor="transparent"></UniStatusBar>
		<view class="greeting">
			<view class="hello">Welcome</view>
			<view class="welcome">{{i18n.welcome_to}}</view>
		</view>
		<view class="lang">
			<text class="chs" :class="{active: curLang == 'chs'}" @tap="switchlang('chs')">{{i18n.chs}}</text> 
			<text class="hline">|</text>
			<text class="en" :class="{active: curLang == 'en'}" @tap="switchlang('en')">{{i18n.en}}</text>
		</view>
		<view class="content">
			<!-- <view class="login-title">登录</view> -->
			<!-- <view class="li state">
				<view class="left">+ 86</view>
				<view class="center">中国</view>
				<view class="right iconfont icon-arrow-right"></view>
			</view> -->
		<!-- 	<view class="li">
				<input type="text" placeholder="请输入用户名" v-model="name">
				<text class="iconfont icon-cha" @tap="name=''"></text>
			</view> -->
			<view class="li">
				<input type="text" :placeholder="i18n.enter_account" v-model="phone">
				<text class="iconfont icon-cha" @tap="phone=''"></text>
			</view>
			<view class="li">
				<input :type="showiconyanjing1 ? 'password' : 'text'" :placeholder="i18n.enter_login_pass" v-model="pass">
				<text class="iconfont" :class="showiconyanjing1 ? 'icon-yanjing1' : 'icon-yanjing2'" @tap="showiconyanjing1 = !showiconyanjing1"></text>
			</view>
			<!-- <view class="forget" @tap.stop="forget">{{i18n.forget}}</view> -->
			<view class="btn-wrapper"><Btn :txt="i18n.login" @tapbtn="doLogin"></Btn></view>
		</view>
		<view class="goLogin" @tap.stop="forget">{{i18n.forget}}</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import UniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue'
	import Load from '@/components/common/load.vue';
	import Btn from '@/components/btn/btn2.vue'
	import {mapGetters, mapMutations} from 'vuex'
	import {pageto, showToast, fetch, forceUpdate} from '@/common/js/util.js'
	let I18N = null
	export default {
		data() {
			return {
				name:'',
				showLoad:false,
				phone: '',
				pass: '',
				curLang: 'chs',
				showiconyanjing1: true
			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
			...mapGetters([
				'getRequestUrl',
				'getLang',
				'getIncode',
				'getLogin',
				'getLangType',
				'getLoginInfo'
			])
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			if(e.index==0){
				this.goRegister()
			}
		},
		onShow() {
			console.log(this.getLogin,'11');
			forceUpdate(this.getLangType)
			this.name = this.getLoginInfo.username
			this.phone = this.getLogin.username
			this.pass = this.getLogin.password
			this.curLang = this.$i18n.locale
			// console.log(this.$i18n)
			// I18N = this.$i18n
			if(this.getLoginInfo.email){
				if(this.getLoginInfo.token){
					return
					let url = this.getRequestUrl + '/api/index/index';
					let data = {
						id:this.getLoginInfo.id,
						token:this.getLoginInfo.token
					}
					this.showLoad = true
					fetch(url,data,'POST').then(res=>{
						this.showLoad = false
						if(res.data.code == 1){
							uni.switchTab({
								url:'/pages/index/index'
							})
						}
					}).catch(err=>{
						this.showLoad = false
					})
				}
			}
		},
		methods: {
			doLogin() {
				if (!this.phone) {
					showToast(this.i18n.enter_phone)
					return
				}
				if (!this.pass) {
					showToast(this.i18n.enter_login_pass)
					return
				}
				this.showLoad = true
				let _data = {
					username: this.phone,
					password: this.pass,
					lang_type: this.getLang
				}
				fetch(this.getRequestUrl + '/api/login/login', _data, "post")
					.then(res => {
						this.showLoad = false
						if (res.statusCode == 200 && res.data.code == 1) {
							console.log(res)
							let {email, id, incode, password, paypwd, salt, status, token, username, gespwd, yqcode} = res.data.data
							let loginfo = {email, id, incode, password, paypwd, salt, status, token, username, gespwd, yqcode}
							let time = res.data.time;
							this.setLoginInfo(loginfo)
							this.setLogin({
								username: this.phone,
								password: this.pass
							})
							
							this.setLoginTime(time);
							pageto('/pages/index/index', true)
						} else {
							showToast(res.data.msg)
						}
					})
					.catch(err => {
						this.showLoad = false
						console.log(err)
					})
			},
			goRegister() {
				pageto('/pages/register/register')
			},
			switchlang(str) {
				this.curLang  = str
			},
			forget() {
				// console.log('forget')
				pageto('/pages/forget/forget')
			},
			...mapMutations([
				'setLoginInfo',
				'setLogin',
				'setLoginTime',
				'setLangType'
			])
		},
		components: {
			UniStatusBar,
			Btn,
			Load
		},
		watch: {
			curLang(newv) {
				this.$i18n.locale = newv
				this.setLangType(newv)
			}
		}
	}
</script>

<style lang="scss">
@import '@/common/scss/variable.scss';
@import '@/common/scss/global.scss';
.app-login {
	.greeting {
		color: $black;
		margin-left: 30upx;
		margin-top: 20upx;
		font-weight: bold;
		.hello {
			font-size: 30px;
			margin-bottom: 16upx;
		}
		.welcome {
			font-size: 15px;
		}
	}
	.lang {
		text-align: right;
		color: $white;
		margin-right: 86upx;
		margin-top: 60upx;
		.hline {
			margin: 0 20upx;
			color: $adorn-green;
			font-weight: 200;
			font-size: 12px;
		}
		.chs, .en {
			width: 60upx;
			height: 60upx;
			font-size: 14px;
			color: #606060;
			display: inline-block;
			text-align: center;
			line-height: 60upx;
			&.active {
				color: $theme-color;
				font-weight: bold;
			}
		}
	}
	.content {
		width: 690upx;
		margin-left: 30upx;
		height: 540upx;
		border-radius: 16upx;
		background-color: $white;
		padding: 0 30upx;
		box-shadow: 0 5px 2px 0px $white;
		.login-title {
			font-size: 14px;
			color: $split-line-color1;
			text-align: center;
			padding: 40upx 0 20upx;
		}
		.li {
			height: 84upx;
			position: relative;
			z-index: 1;
			position: relative;
			background-color: #EDEDED;
			border-radius: 55upx;
			input {
				height: 84upx;
				font-size: 12px;
				color: $text-gray-color4;
				padding-left: 40upx;
			}
			.iconfont {
				position: absolute;
				right: 20upx;
				top: 0;
				width: 80upx;
				height: 84upx;
				line-height: 84upx;
				z-index: 5;
				text-align: center;
				color: $theme-color;
			}
			&+.li {
				margin-top: 30upx;
			}
		}
		.forget {
			font-size: 12px;
			font-weight: bold;
			color: $theme-color;
			text-align: right;
			margin-top: 29upx;
			margin-right: 40upx;
		}
		.btn-wrapper {
			margin-top: 120upx;
		}
	}
	.goLogin {
		width: 328upx;
		height: 86upx;
		color: #1D7DFF;
		line-height: 86upx;
		text-align: center;
		font-size: 13px;
		margin: 60upx auto;
	}
}
</style>

